<template>
  <div id="store_io">
    <div class="storelist">
      <el-table
        border
        :data="storelist"
        :stripe="true"
        :header-row-style="{height:'20px'}"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        @row-click="selectRow"
        tooltip-effect="light"
        highlight-current-row
        style="width: 1200px ;"
        height="680px"
      >
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="仓库编码"></el-table-column>
        <el-table-column prop="name" label="仓库名称"></el-table-column>
        <el-table-column prop="address" label="仓库地址"></el-table-column>
      </el-table>
    </div>
    <div class="detailheader">
        <h3>{{storename}}仓库出入明细</h3>
      </div>
    <div class="detail">
      <div style="text-align:center;margin:auto" v-if="isSelect==false">请先选择仓库</div>
      <div v-for="(item,index) in iolist" :key="index">
        <div class="detail_item" :style="{ backgroundColor: item.color}">
          <strong>{{item.date}}</strong>
          &emsp;|&emsp;{{storename}}{{item.statu}}了一些商品
          <el-button @click="lookdetail(index)" type="text" style="color:rgb(6, 94, 221);">查看详细</el-button>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      storelist: [],
      isSelect:false,
      storename: "",
      dialog:{
        '调入':false,
        '采购':false,
        '报废':false,
        '收回':false,
        '借出':false,
        '调出':false,
      },
      iolist: [
      ]
    };
  },
  created() {
    this.$http.get("/store/list").then(response => {
      this.storelist = response.data;
    });
  },
  methods: {
    selectRow(Row) {
      window.console.log(Row);
      this.refresh_detail (Row.id)
      this.storename = Row.name;
      this.isSelect = true;
    },
    lookdetail(index) {
      window.console.log('ref',this.iolist[index].ref);
      window.console.log(this.dialog['调入']);
      
    },
    refresh_detail(id){
      window.console.log(id);
      
      this.$http.post("assetIo/list",{storeid:id}).then(response => {
        this.iolist = response.data
        this.iolist.forEach(row =>{
          switch(row.statu){
            case '调入':{
              row.color = "#61a78a"
              break
            }
            case '采购':{
               row.color = "#b8d8e0"
              break
            }
            case '报废':{
               row.color = "#b9b9b9"
              break
            }
            case '收回':{
               row.color = "#c7e0b8"
              break
            }
            case '借出':{
               row.color = "#999"
              break
            }
            case '调出':{
               row.color = "#999"
              break
            }
          }
        })
      })
    }
  }
};
</script>

<style>
#store_io .storelist {
  width: 30%;
  float: left;
}
#store_io .detail {
  border: solid 1px rgb(206, 206, 206);
  border-radius: 4px;
  height: 635px;
  float: right;
  width: 1200px;
  overflow: scroll;
}
#store_io .detail_item {
  margin: 5px 50px;
  padding: 2px;
  text-align: center;
  background-color: rgb(184, 216, 224);
  border-radius: 3px;
}
#store_io .detailheader{
  text-align: center;
  /* position: absolute;; */
  /* z-index: 22; */
}
</style>